<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    body {
      font-family: "Helvetica", "Arial", serif;
      color: #333;
      background-color: #ccc;
      margin: 1em 10%;
    }

    h1 {
      color: #333;
      background-color: transparent;
    }

    a {
      color: #c60;
      background-color: transparent;
      font-weight: bold;
      text-decoration: none;
    }

    ul {
      padding: 0;
    }

    li {
      float: left;
      padding: 1em;
      list-style: none;
    }

    #imagegallery a {
      margin: 0px 20px 20px 0px;
      padding: 0px;
      display: inline;
    }

    #imagegallery a img {
      border: 0;
    }
  </style>
</head>

<body>
  <h2>
    美女画廊
  </h2>

  <div id="imagegallery">
    <a href="./img/QQ图片20230124180315.jpg" title="美女A">
      <img src="../img/QQ图片20230124180315.jpg" width="100px" alt="美女1" id="img1"/>
    </a>
    <a href="../img/QQ图片20230124180319.jpg" title="美女B">
      <img src="../img/QQ图片20230124180319.jpg" width="100px" alt="美女2" id="img2"/>
    </a>
    <a href="../img/QQ图片20230124180322.jpg" title="美女C">
      <img src="../img/QQ图片20230124180322.jpg" width="100px" alt="美女3" id="img3"/>
    </a>
    <a href="../img/QQ图片20230124180326.jpg" title="美女D">
      <img src="../img/QQ图片20230124180326.jpg" width="100px" alt="美女4" id="img4"/>
    </a>
  </div>

  <div style="clear:both"></div>

  <img id="image" src="../img/QQ图片20230124180315.jpg" alt="" width="450px" />

  <p id="des">选择一个图片</p>
  <script>
    var agh = document.getElementsByTagName("a");
    console.dir(agh)
    var pl = document.getElementsByTagName("des");
    var imga = document.getElementsByTagName("image");
    for (var index = 0; index < agh.length; index++) {
      const element = agh[index];
      element.onclick = function () {
        imga.src = this.src; 
      }
    }

  </script>
</body>

</html>